<script lang="ts" setup>
import {
  getOneByCondition,
  getReadonly,
  insertOne,
  reSetDialogModel,
  updateOne,
  urls
} from '@/index';

import type { AsmePersonCertification, DialogModel } from '@/index.d';
import type { FormInstance, FormRules } from 'element-plus';

const dialogModel = defineModel<DialogModel<AsmePersonCertification>>('dialogModel', {
  required: true
});

const { insertForbidden, updateForbidden } = getReadonly(dialogModel.value);

const formData = reactive<AsmePersonCertification>({
  id: 0,
  attachmentUuid: ''
});

const setAsmePersonCertification = async (res: AsmePersonCertification) => {
  formData.id = res.id;
  formData.name = res.name;
  formData.username = res.username;
  formData.workNo = res.workNo;
  formData.certificationReference = res.certificationReference;
  formData.domain = res.domain;
  formData.method = res.method;
  formData.level = res.level;
  formData.startDate = res.startDate;
  formData.endDate = res.endDate;
  formData.attachmentUuid = res.attachmentUuid;
  formData.attachmentUrl = res.attachmentUrl;
  formData.creator = res.creator;
  formData.createTime = res.createTime;
  formData.updater = res.updater;
  formData.updateTime = res.updateTime;
  formData.user = res.user;
};

const reSetAsmePersonCertification = () => {
  reSetDialogModel(dialogModel);
  formData.id = 0;
};

watch(
  () => dialogModel.value.visible,
  value => {
    value && (formData.id = dialogModel.value.id as number);
    !value && reSetAsmePersonCertification();
  },
  {
    immediate: true
  }
);

watch(
  () => formData.id,
  async (value: number | undefined) => {
    if (value) {
      const res = await getOneByCondition<AsmePersonCertification>(
        urls.asmePersonCertification,
        'id',
        value
      );
      res && setAsmePersonCertification(res);
    }
  },
  {
    immediate: true
  }
);

const asmePersonInfoFormRef = ref<FormInstance>();

interface AsmePersonInfoFormRules {
  domain: number;
  method: string;
  level: string;
  startDate: string;
  endDate: string;
}

const asmePersonInfoFormRules = computed(() => {
  switch (dialogModel.value.type) {
    case 'view':
      return reactive({});

    case 'update':
      return reactive<FormRules<AsmePersonInfoFormRules>>({
        domain: [{ required: true, message: '领域不能为空', trigger: 'blur' }],
        method: [{ required: true, message: '方法不能为空', trigger: 'blur' }],
        level: [{ required: true, message: '级别不能为空', trigger: 'blur' }],
        startDate: [{ required: true, message: '发证日期不能为空', trigger: 'blur' }],
        endDate: [{ required: true, message: '失效日期不能为空', trigger: 'blur' }]
      });

    case 'insert':
      return reactive<FormRules<AsmePersonInfoFormRules>>({
        domain: [{ required: true, message: '领域不能为空', trigger: 'blur' }],
        method: [{ required: true, message: '方法不能为空', trigger: 'blur' }],
        level: [{ required: true, message: '级别不能为空', trigger: 'blur' }],
        startDate: [{ required: true, message: '发证日期不能为空', trigger: 'blur' }],
        endDate: [{ required: true, message: '失效日期不能为空', trigger: 'blur' }]
      });
  }
});

const saveFormData = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl
    .validate()
    .then(async valid => {
      if (valid) {
        if (dialogModel.value.id === 0) {
          const res = (await insertOne<AsmePersonCertification>(
            urls.asmePersonCertification,
            formData
          )) as AsmePersonCertification;
          if (res) {
            setAsmePersonCertification(res);
            dialogModel.value.id = res.id as number;
            dialogModel.value.type = 'update';
            dialogModel.value.change = true;
          }
        } else {
          const tempFormData: AsmePersonCertification = {
            id: formData.id,
            name: formData.name,
            username: formData.username,
            attachmentUuid: formData.attachmentUuid
          };

          const res = (await updateOne<AsmePersonCertification>(
            urls.asmePersonCertification,
            tempFormData
          )) as AsmePersonCertification;

          if (res) {
            dialogModel.value.change = true;
            formData.updater = res.updater;
            formData.updateTime = res.updateTime;
          }
        }
      }
    })
    .catch(res => console.log(res));
};
</script>
<template>
  <HqDialogDetail :dialog-model="dialogModel" @submit="saveFormData(asmePersonInfoFormRef)">
    <template #default>
      <el-card shadow="hover">
        <template #header>基本信息</template>
        <template #default>
          <hq-form :model="formData" ref="asmePersonInfoFormRef" :rules="asmePersonInfoFormRules">
            <el-row :gutter="5">
              <hq-col>
                <el-form-item label="序号" prop="id">
                  <el-input v-model.number="formData.id" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="人员" prop="name">
                  <el-select
                    v-model="formData.username"
                    placeholder="请选择人员"
                    required
                    :disabled="insertForbidden"
                  >
                    <HqAsmeUserOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="毕业学校" prop="name">
                  <el-input :value="formData.user?.graduateSchool" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="专业" prop="major">
                  <el-input :value="formData.user?.major" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="毕业时间" prop="graduateDate">
                  <el-input :value="formData.user?.graduateDate" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="学历" prop="educationLevel">
                  <el-input :value="formData.user?.educationLevel" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="证书编号" prop="certificationReference">
                  <el-input v-model="formData.certificationReference" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="方法" prop="method">
                  <el-select v-model="formData.method">
                    <HqNdeMethodOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="等级" prop="level">
                  <el-select v-model="formData.level">
                    <HqNdeMethodLevelOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="行业" prop="domain">
                  <el-select v-model="formData.domain">
                    <el-option value="U" label="U" />
                    <el-option value="N" label="N" />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="发证日期" prop="startDate">
                  <el-input
                    v-if="dialogModel.type === 'view'"
                    :value="formData.startDate"
                    readonly
                  />
                  <el-date-picker
                    v-else
                    v-model="formData.startDate"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :readonly="updateForbidden"
                  />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="失效日期" prop="endDate">
                  <el-input v-if="dialogModel.type === 'view'" :value="formData.endDate" readonly />
                  <el-date-picker
                    v-else
                    v-model="formData.endDate"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :readonly="updateForbidden"
                  />
                </el-form-item>
              </hq-col>
            </el-row>
          </hq-form>
        </template>
      </el-card>
      <el-card shadow="hover" v-if="formData.attachmentUuid">
        <template #header>证书附件</template>
        <template #default>
          <HqUploadOne
            :key-word="formData.attachmentUuid"
            :disabled="dialogModel.type !== 'update'"
          />
        </template>
      </el-card>
    </template>
  </HqDialogDetail>
</template>
<style lang="scss" scoped></style>
